<?php
  include("includes/function.php");
  $id = $_POST["id"];
  $tipe = $_POST["tipe"];
?>
  <style type="text/css">
    #formProfil{
      background-color: #000;
      margin-left: -40%;
      margin-top: -80%;
      width: 1080px;
      height: 480px;
      min-height: 480px;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    }
    .modal-body{
      height: 100%;
      max-height: 2048px;
      min-height: 480px;
      padding: 0px;
    }
    img{
      max-width: none;
    }
  </style>
<div id="formProfil" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <div class="image-placer-modal">
      <i class="image-loading"></i>
      <?php 
        if ($tipe == 2) {
      ?>
      <img id="image-modal" src="<?php echo cekGambar($id, 2, 1); ?>">
      <?php
        } else{
      ?>
      <img id="image-modal" src="<?php echo cekGambar($id, 1, 1); ?>">
      <!-- <img id="image-modal" src="<?php echo $src;?>"> -->
      <?php
        } 
      ?>
    </div>
    <div class="side-panel-modal">
      <div class="thumb-prev">
        <?php 
          if ($tipe == 2) {
        ?>
        <img src="<?php echo cekGambar($id, 2, 2); ?>" style="position: relative; width:100px;" alt="Thumbnail Preview" />
        <?php
          } else{
        ?>
        <img src="<?php echo cekGambar($id, 1, 2); ?>" style="position: relative; width:100px;" alt="Thumbnail Preview" />
        <!-- <img src="" style="position: relative; width:100px;" alt="Thumbnail Preview" /> -->
        <?php
          } 
        ?>
      </div>
      <form id="upload-img" method="post" enctype="multipart/form-data">
        <input id="file-to-upload" type="file" name="file-to-upload" id="file" style="display: none;"><br>
      </form>
      <input type="hidden" name="x1" value="" id="x1" />
      <input type="hidden" name="y1" value="" id="y1" />
      <input type="hidden" name="x2" value="" id="x2" />
      <input type="hidden" name="y2" value="" id="y2" />
      <input type="hidden" name="w" value="" id="w" />
      <input type="hidden" name="h" value="" id="h" />
      <button id="toggle-pict" class="btn btn-primary"><i class="icon-pencil"></i> Change Picture</button>
      <button id="toggle-thumb" class="btn btn-primary"><i class="icon-edit"></i> Change Thumbnail</button>
    </div>
  </div>
</div>

<script type="text/javascript">

  var curW = 100;
  var curH = 100;

  function preview(img, selection) { 
    var scaleX = 100 / selection.width; 
    var scaleY = 100 / selection.height; 

    $('.thumb-prev > img').css({ 
      width: Math.round(scaleX * curW) + 'px',
      height: Math.round(scaleY * curH) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
  } 

  $(document).ready(function() {
    $('#formProfil').modal('show');

    $('#toggle-pict').click(function(){
      $('#file-to-upload').click();
    });

    $('#toggle-thumb').live('click', function(){
      curH = $('#image-modal').height();
      curW = $('#image-modal').width();

      $('#image-modal').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectChange: preview
      });

      $(this).removeClass("btn-primary");
      $(this).html("<i class='icon-save'></i> Save Thumbnail");
      $(this).addClass("btn-success");
      $(this).attr("id","save-thumb");

      $('#save-thumb').click(function(){
        var x1 = $('#x1').val();
        var y1 = $('#y1').val();
        var x2 = $('#x2').val();
        var y2 = $('#y2').val();
        var w = $('#w').val();
        var h = $('#h').val();
        var formThumb = {
          tipe: <?php echo $tipe; ?>,
          x1: x1,
          y1: y1,
          x2: x2,
          y2: y2,
          w: w,
          h: h,
          oriH: $('#image-modal').height(),
          oriW: $('#image-modal').width()
        }
        console.log(formThumb);
        if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
          alert("You must make a selection first");
          return false;
        }else{
          $.ajax({
            url: 'act-profil.php?act=2&id=<?php echo $id; ?>',
            type: 'POST',
            data: formThumb,
            complete: function(xhr, textStatus) {
              //called when complete
            },
            success: function(data, textStatus, xhr) {
              location.reload();
            },
            error: function(xhr, textStatus, errorThrown) {
              //called when there is an error
            }
          });
          
        }
      });
    });


    $('#file-to-upload').live('change', function(){
      // console.log("haha");
      $('#image-modal').fadeOut(function(){
        $('.image-loading').addClass("icon-spinner");
        $('.image-loading').addClass("icon-spin");
        $('.image-loading').css("display","inline-block");
      });

      $.ajaxFileUpload({
        url:'act-profil.php?act=1&id=<?php echo $id; ?>',
        secureuri:false,
        fileElementId:'file-to-upload',
        dataType: 'json',
        data:{tipe: <?php echo $tipe; ?>, name:'logan', id:'id'},
        success: function (data, status){
          if(typeof(data.error) != 'undefined'){
            if(data.error != ''){
              alert(data.error);
            }else{
              $('#image-modal').attr("src", data.url);
              $('.image-loading').removeClass("icon-spinner");
              $('.image-loading').removeClass("icon-spin");
              $('.image-loading').css("display","none");
              $('#image-modal').fadeIn();
              $('.thumb-prev > img').attr("src", data.url);
              $('.thumb-prev > img').css({ 
                width: data.curWidth + 'px',
                height: data.curHeight + 'px'
              });
              curH = data.curHeight;
              curW = data.curWidth;

              $('#image-modal').imgAreaSelect({
                aspectRatio: '1:1',
                onSelectChange: preview
              });
            }
          }
        },
        error: function (data, status, e){
          alert(e);
        }
      });
      return false;
    });

    // $('#save_thumb').click(function() {
    //   var x1 = $('#x1').val();
    //   var y1 = $('#y1').val();
    //   var x2 = $('#x2').val();
    //   var y2 = $('#y2').val();
    //   var w = $('#w').val();
    //   var h = $('#h').val();
    //   if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
    //     alert("You must make a selection first");
    //     return false;
    //   }else{
    //     return true;
    //   }
    // });
  });
</script>